<template>
  <div v-if="$route.query.current == 'first'" class="news">
    <div class="content">
      <div class="newsinfo-title">资讯动态</div>
        <div class="item" v-for="item in messageData" @click="goDetail(item._id)">
          <div class="news-title">{{ item.title }}</div>
          <div class="news-time">{{ item.time }}</div>
        </div>
      <div class="pagination">
        <el-pagination
          background
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          v-model:total="total"
          layout="prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
  <div v-else class="news">
    <div class="content">
      <div class="newsinfo-title">政策动态</div>
      <div class="item" v-for="item in policyData">
        <div class="news-title">{{ item.title }}</div>
        <div class="news-time">{{ item.time }}</div>
      </div>
      <div class="pagination">
        <el-pagination
          background
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          v-model:total="total"
          layout="prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="news">
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { reqAllMessageInfo } from "@/api/message";
import { reqAllPolicyInfo } from "@/api/policy";

//获取路由器对象
let $router = useRouter();
let $route = useRoute();
// 判断是资讯还是政策
let activeName = $route.query.current;
// 分页器数据
let pageNo = ref(1);
let pageSize = ref(10);
let total = ref(0);
// 资讯数据
let messageData = ref<any>([]);
// 政策数据
let policyData = ref<any>([]);

// 点击相应资讯/政策跳转到详情页
const goDetail = (id:string) => {
    $router.push({path:'/newsDetail',query:{current:activeName,id}})
}

// 获取资讯数据
const getMessgeInfo = async () => {
  let result = await reqAllMessageInfo(pageNo.value, pageSize.value);
  if (result.code == 200) {
    messageData.value = result.data;
    total.value = result.total;
  }
};

// 获取政策数据
const getPolicyInfo = async () => {
  let result = await reqAllPolicyInfo(pageNo.value, pageSize.value);
  if (result.code == 200) {
    policyData.value = result.data;
    total.value = result.total;
  }
};

// 分页器回调
const handleSizeChange = (value: number) => {
  pageNo.value = value;
  if (activeName === "first") {
    getMessgeInfo();
  } else {
    getPolicyInfo();
  }
};
const handleCurrentChange = (value: number) => {
  pageNo.value = value;
  if (activeName === "first") {
    getMessgeInfo();
  } else {
    getPolicyInfo();
  }
};

onMounted(() => {
  if (activeName === "first") {
    getMessgeInfo();
  } else {
    getPolicyInfo();
  }
});
</script>

<style lang="scss" scoped>
.news {
  width: 1200px;
  margin: auto;
  .content {
    height: 500px;
    .newsinfo-title {
      background: #eee;
      height: 45px;
      line-height: 45px;
      font-size: 16px;
      padding-left: 15px;
      margin-top: 30px;
      margin-bottom: 20px;
    }
    .item {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eee;
      padding: 15px 15px;
      font-size: 14px;
      color: #333;
      cursor: pointer;
      &:hover {
        color: #4caf50;
      }
      .news-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 90%;
      }
    }
    .pagination {
      margin-top: 30px;
      margin-bottom: 30px;
      display: flex;
      justify-content: flex-end;
      text-align: center;
    }
  }
}
</style>
